<template>
   <!-- 二维码 -->
    <el-dialog :visible.sync="bindingOpen" append-to-body width="400px" class="bind-wechat-container">
      <div class="wechat-qr-code" ref="qrCodeUrl" v-if="qrCodeUrlIsShow"></div>
      <p class="wechat-qr-remind">微信扫描二维码申请绑定</p>
    </el-dialog>
</template>

<script>
import QRCode from "qrcodejs2";
import store from '@/store'

export default {
  name: 'BindWechat',
  computed: {
  
  },
  data() {
    return {
        bindingOpen: false,
        qrCodeUrlIsShow: false,
    }
  },
  methods:{
    binding() {
        this.bindingOpen = true
        if(this.qrCodeUrlIsShow === false) {
            this.qrCodeUrlIsShow = true
            var that = this
            setTimeout(() => {
            new QRCode(that.$refs.qrCodeUrl, {
                // 微信扫一扫跳转到绑定界面
                text: window.location.origin + '/binding?userName=' + store.getters.name,// 需要转换为二维码的内容
                width: 300,
                height: 300,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            }, 100)
        }
    },
    open() {
        this.binding()
    }
  }
}
</script>

<style lang="scss" scoped>
    .bind-wechat-container {
        text-align:center;
        .wechat-qr-code {
            display: inline-block;
            text-align: center;
        }
        .wechat-qr-remind {
            
            text-align: center;
            margin-top: 30px;
            font-size: 18px;
            color: rgb(102, 102, 102);
        }
    }   
</style>
